<template>
  <view class="album-page">
    <u-navbar placeholder
              leftIcon="arrow-left"
              :title="$t('pages_album_album_msg_5d4a6811')"
              @leftClick="goBack" />
    
    <mescroll-body
      ref="mescrollRef"
      @init="mescrollInit"
      @down="downCallback"
      @up="upCallback"
      :down="downOption"
      :up="upOption"
      :height="`${systemInfo.windowHeight - systemInfo.statusBarHeight - 44}px`"
    >
      <view class="album-list">
        <view v-for="item in dataList" 
              :key="item.id" 
              class="album-item"
              @click="onAlbumClick(item)">
          <image :src="item.image" 
                 class="album-image" 
                 mode="widthFix"
                 @error="onImageError"
                 @load="onImageLoad" />
          <view class="album-content">
            <text class="album-name">{{ item.name }}</text>
          </view>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js'

export default {
  name: 'News-List',
  mixins: [MescrollMixin],
  computed: {
    ...mapState({
      systemInfo: (state) => state.app.systemInfo,
    }),
  },
  data() {
    return {
      dataList: [],
      eventId: null,
      downOption: {
        auto: true,
      },
      upOption: {
        auto: false,
      },
    }
  },
  onLoad(options) {
    this.eventId = options.eventId || null
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    onAlbumClick(item) {
      // 预览图片
      uni.previewImage({
        current: item.image,
        urls: [item.image]
      })
    },
    onImageError(e) {
      console.error('图片加载失败:', e);
    },
    onImageLoad(e) {
      console.log('图片加载成功:', e);
    },
    formatDate(dateStr) {
      if (!dateStr) return this.$t('pages_album_album_msg_fbec222b')
      const date = new Date(dateStr)
      if (isNaN(date.getTime())) return this.$t('pages_album_album_msg_fbec222b')
      return `${date.getMonth() + 1}月${date.getDate()}日`
    },
    getStatusText(status) {
      const statusMap = {
        0: this.$t('pages_album_album_msg_dca0c13b'),
        1: this.$t('pages_album_album_text_22b4334f'),
        2: this.$t('pages_album_album_msg_0a666759')
      }
      return statusMap[status] || this.$t('pages_album_album_msg_903b25f6')
    },
    getStatusClass(status) {
      const classMap = {
        0: 'status-published',
        1: 'status-draft',
        2: 'status-offline'
      }
      return classMap[status] || 'status-unknown'
    },
    async upCallback(page) {
      try {
        // 获取精彩合集数据，type=3表示精彩合集
        const result = await this.$api.event.getByMore({
          id: this.eventId,
          type: 3
        })
        console.log('精彩合集数据:', result);
        const albumsData = result || []
        
        if (page.num == 1) {
          this.dataList = albumsData
        } else {
          this.dataList = this.dataList.concat(albumsData)
        }
        
        // 结束加载
        this.mescroll.endByPage(albumsData.length, 1)
      } catch (error) {
        console.error('获取精彩合集失败:', error)
        this.mescroll.endErr()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.album-page {
  background: #f5f5f5;
  min-height: 100vh;
}

.album-list {
  padding: 20rpx;
  column-count: 2;
  column-gap: 20rpx;
}

.album-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.04);
  display: inline-block;
  width: 100%;
  margin-bottom: 20rpx;
  break-inside: avoid;
  page-break-inside: avoid;
}

.album-image {
  width: 100%;
  height: auto;
  min-height: 200rpx;
  max-height: 500rpx;
  display: block;
}

.album-content {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #333;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  word-break: break-all;
}
</style>